<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>定义组件的两种方式</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div class="container">
			<hello></hello>
			<world></world>
			<my-component></my-component>
		</div>
		<script type="text/javascript">
			/**
				方式一、先创建组件构造器，由组件构造器创建组件
			*/
			//1.使用Vue.extend()创建一个组件构造器
			var MyComponent = Vue.extend({
				template:'<h3>Hello World</h3>'
			});
			//2.使用Vue.component(标签名，组件构造器)，根据组件构造器来创建组件
			Vue.component('hello',MyComponent);
			

			/**
				方式二、直接创建组件
			*/
			//注册组件
			Vue.component('world',{
				template:'<h1>你好世界</h1>'
			});

			//创建根实例
			new Vue({
				el:'.container',
				components:{
					'my-component':{
						template:'<h2>我是局部组件{{name}}</h2>',
						data:function(){
			                return {
			                    name:'Lucy'
			                }
			            }
					}
				}
			});
		</script>
	</body>
	</html>	